<template>
    <container >
        <div class="v-middle">
            <div class="layout__grid">
                <goods-form-cat ref="cat" v-show="formStep <= 1"/>
                <el-tabs v-model="tabPaneIndex" v-show="formStep > 1">
                    <el-tab-pane label="基础信息" name="base">
                        <goods-form-base-resource ref="base" :form="form" />
                    </el-tab-pane>
                    <el-tab-pane label="商品详情" name="detail">
                        <goods-form-detail ref="detail" />
                    </el-tab-pane>
                    <el-tab-pane label="积分规则" name="integral">
                        <goods-form-integral ref="integral" />
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div class="v-footer" slot="v-footer">
            <div class="actions" style="margin:0 40px;">
                <el-button :disabled="formStep < 2" icon="el-icon-arrow-left" @click="toPrev">上一步</el-button>
                <el-button :disabled="formStep > 2" type="primary" @click="toNext">
                    下一步
                    <i class="el-icon-arrow-right el-icon--right"></i>
                </el-button>
                <el-button type="success" @click="formSubmit" icon="el-icon-edit">保存</el-button>
                <el-button onClick="history.back()">返回</el-button>
            </div>
        </div>
    </container>
</template>
<script>


    export default {

        name: 'goods-form',

        components: {
            GoodsFormCat: () => import('./GoodsFormCat'),
            GoodsFormDetail: () => import('./GoodsFormDetail'),
            GoodsFormIntegral: () => import('./GoodsFormIntegral'),
            GoodsFormBaseResource: () => import('./GoodsFormBaseResource'),
        },

        data() {
            return {
                form: {
                    goods_id: this.$route.query.id, cat_id: '', weight: '', volume: '',
                    sale_status: 1, detail: '', detail_mobile: [], trade_mode: 1, stock_calc_type: 0,
                    after_service: [], image_url: [], goods_spec: '', goods_attr: '',
                    sale_start_time: '', sale_end_time: '', goods_long_image: '',
                },
                formStep: 2,
                catPath: '',
                loading: false,
                goodsType: '',
                tabPaneList: ['base',  'detail', 'integral'],
                tabPaneIndex: 'base',
            }
        },


        methods: {

            // 初始化信息
            async init(data) {
                this.$refs.base.init(data)
                this.$refs.attr.init(data.goods_attr)
                this.$refs.detail.init(data)
                for (let i in this.form) this.form[i] = data[i]
                this.$refs.spec.setSkuFormData(data.goods_spec)
                await this.getCatAttribute()
            },

            // 改变选项卡
            changeTabPane(direction) {
                let index = this.tabPaneList.findIndex(item => item === this.tabPaneIndex)
                let target = index
                if (direction === 'prev' && index > 0) target = index - 1
                if (direction === 'next' && index < this.tabPaneList.length - 1) target = index + 1
                this.tabPaneIndex = this.tabPaneList[target]
            },


            // 上一步
            toPrev() {
                if (this.tabPaneIndex === 'base') return this.formStep = 1
                this.changeTabPane('prev')
            },

            // 下一步
            toNext() {
                if (this.formStep === 1) {
                    this.form.cat_id = this.$refs.cat.getLastId()
                    if (!this.form.cat_id) return this.$message.error("请选择分类");
                    this.getCatAttribute();
                    this.$refs.base.init({cat_path: this.$refs.cat.getPathList()})
                }
                if (this.formStep > 1) return this.changeTabPane('next')
                this.formStep += 1;
            },


            // 获取商品
            async getGoodsInfo(goods_id) {
                if (!goods_id) return
                this.loading = true
                this.formStep = 2
                const res = await this.http.get('/goods/detail', {goods_id})
                this.loading = false
                if (res.data.code !== 0) return this.$message.error(res.data.message)
                let data = res.data.data
                this.$refs.base.init(data)
                this.$refs.attr.init(data.goods_attr)
                this.$refs.detail.init(data)


                for (let i in this.form) this.form[i] = data[i]
                this.$refs.spec.setSkuFormData(data.goods_spec)
                // this.$refs.cat.init(data.cat_path);
                await this.getCatAttribute()
            },

            // 获取分类属性
            async getCatAttribute() {
                if (!this.form.cat_id) return
                const res = await this.http.get('/goodsCat/attribute', {cat_id: this.form.cat_id})
                if (res.data.code !== 0) return
                let data = res.data.data
                for (let i in data.spec) data.spec[i].checked = []
                this.$refs.spec.setAttributeList(data.spec)
                this.$refs.attr.setDynamicForm(data.base)
            },


            async formSubmit() {

                // 规格属性
                let form = JSON.parse(JSON.stringify(this.form))
                form = {...this.$refs.base.getFormData(), ...form}

                form.goods_spec = []
                form.detail_mobile = JSON.stringify(form.detail_mobile)
                form.goods_image = this.form.image_url.length ? this.form.image_url[0] : ''
                form.image_url = JSON.stringify(form.image_url)
                

                form.goods_attr = []
                const res = await this.http.post('/goods/' + (form.goods_id ? 'edit' : 'add'), form)
                if (res.data.code !== 0) return this.$message.error(res.data.message)
                this.$message.success(res.data.message)
                history.back()
            }
        }
    }
</script>
